<template>
  <div class="rowspan-fixed-table">
    <el-table
      v-if="tableRendered"
      :data="formatedData"
      :span-method="objectSpanMethod"
      border
      stripe
      size="mini"
      :max-height="maxHeight"
      style="width: 100%"
    >
      <el-table-column
        v-for="config in columnConfig"
        :key="config.prop"
        :prop="config.prop"
        :label="config.label"
        :width="config.width"
        :min-width="config.minWidth"
        :fixed="config.fixed"
        fit="true"
      >
        <template slot-scope="scope">
          <div>
            <div v-if="config.type === 'svg'" class="rft-svg">
              <neu-svg
                :name="scope.row.svgName"
                :color="scope.row.svgColor"
                width="16"
                height="16"
              />
            </div>
            <div v-else-if="config.type === 'tag'" class="rft-tag">
              <div
                v-for="(tagValue, index) in scope.row[config.prop].split('；')"
                :key="index"
                class="rft-tag-item"
              >
                <el-tag :type="getTypeByIndex(index)">{{ tagValue }}</el-tag>
              </div>
            </div>
            <div v-else-if="config.type === 'editable'" class="rft-editable">
              <div
                :ref="'rft-editable-input-div-' + scope.$index"
                class="rft-editable-input hidden"
              >
                <el-input
                  :ref="'rft-editable-input-' + scope.$index"
                  v-model="scope.row[config.prop]"
                  size="small"
                  maxlength="12"
                  @blur="handleBlur(scope)"
                />
              </div>
              <div
                :ref="'rft-editable-txt-div-' + scope.$index"
                class="rft-editable-txt shown"
              >
                <div
                  :ref="'rft-editable-txt-' + scope.$index"
                  class="rft-editable-txt"
                  @dblclick="handleBblclick(scope)"
                  v-html="
                    scope.row[config.prop] ? scope.row[config.prop] : '&nbsp;'
                  "
                />
              </div>
            </div>
            <div v-else>{{ scope.row[config.prop] }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import NeuSvg from '../Svg/index'

const RFTCLASS = {
  EDITABLE_INPUT: {
    SHOW: 'rft-editable-input shown',
    HIDE: 'rft-editable-input hidden'
  },
  EDITABLE_TXT: {
    SHOW: 'rft-editable-txt shown',
    HIDE: 'rft-editable-txt hidden'
  }
}

export default {
  name: 'RowSpanFixedTable',
  components: {
    NeuSvg
  },
  props: {
    msg: String,
    busdata: Array,
    columnConfig: Array,
    maxHeight: Number
  },
  data() {
    return {
      tableRendered: false,
      formatedData: null
    }
  },
  watch: {
    busdata: {
      handler() {
        const tempData = [...this.busdata]
        this.formatedData = this.formatData(tempData, this.columnConfig)
        this.tableRendered = true
      },
      deep: true
    }
  },
  created() {},
  methods: {
    // eslint-disable-next-line
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.isStart) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    formatData(busData, columnConfig) {
      function getSpanedColumn(columnConfig) {
        for (const column of columnConfig) {
          if (column.spaned) {
            return column.prop
          }
        }
      }
      const spanedColumn = getSpanedColumn(columnConfig)
      // console.log('spanedColumn:' + spanedColumn);
      // sort
      busData.sort(function(a, b) {
        return a[spanedColumn] - b[spanedColumn]
      })

      if (busData.length === 0) {
        throw new Error('busData不能为空')
      }

      let tempKeyword = busData[0][spanedColumn]
      let startPos = 0
      for (let i = 0; i < busData.length; i++) {
        const rowData = busData[i]
        if (i === 0 || rowData[spanedColumn] !== tempKeyword) {
          rowData.isStart = true
          tempKeyword = rowData[spanedColumn]
          if (i !== 0) {
            busData[startPos].rowspan = i - startPos
          }
          startPos = i
        } else {
          rowData.isStart = false
        }
        if (i === busData.length - 1) {
          busData[startPos].rowspan = i - startPos + 1
        }
      }

      return busData
    },
    getTypeByIndex(i) {
      if (i % 4 === 0) {
        return 'default'
      } else if (i % 4 === 1) {
        return 'success'
      } else if (i % 4 === 2) {
        // info
        return 'danger'
      } else if (i % 4 === 3) {
        return 'warning'
      }
    },
    handleBblclick(scope) {
      const inputDiv = this.$refs['rft-editable-input-div-' + scope.$index]
      const input = this.$refs['rft-editable-input-' + scope.$index]
      const txtDiv = this.$refs['rft-editable-txt-div-' + scope.$index]
      inputDiv[0].setAttribute('class', RFTCLASS.EDITABLE_INPUT.SHOW)
      txtDiv[0].setAttribute('class', RFTCLASS.EDITABLE_TXT.HIDE)
      input[0].focus()
    },
    handleBlur(scope) {
      const inputDiv = this.$refs['rft-editable-input-div-' + scope.$index]
      const txtDiv = this.$refs['rft-editable-txt-div-' + scope.$index]
      inputDiv[0].setAttribute('class', RFTCLASS.EDITABLE_INPUT.HIDE)
      txtDiv[0].setAttribute('class', RFTCLASS.EDITABLE_TXT.SHOW)
    }
  }
}
</script>
<style lang="scss">
.rowspan-fixed-table {
  .rft-svg {
    width: 16px;
    max-height: 16px;
    margin: 8px 8px 8px 12px;
  }
  .rft-tag-item {
    margin-left: 10px;
    float: left;
  }
  .shown {
    visibility: visible;
    position: relative;
  }
  .hidden {
    visibility: hidden;
    position: absolute;
  }
  .rft-editable-txt-div {
    width: 100%;
    height: 100%;
  }
  .rft-editable-txt {
    width: 100%;
    height: 100%;
  }
  .el-table__body td {
    margin: 0;
    padding: 0;
    height: 41px;
  }
  .el-input__inner {
    padding: 2px;
  }
}
</style>
